<template>
	<view class="container">
		<view class="main">
			<view class="info">
				<view class="info-logo">
					<image :src="info.get_product?.icon" mode="aspectFill"></image>
				</view>
				<view class="info-title">
					{{ info.get_product?.name}}
				</view>
				<view class="info-nav">
					<view class="info-nav-item">
						<view class="label">
							客户姓名
						</view>
						<view class="value">
							{{ info.username || '--'}}
						</view>
					</view>
					<view class="info-nav-item">
						<view class="label">
							公司名称
						</view>
						<view class="value">
							{{ info.business_name || '--' }}
						</view>
					</view>
					<view class="info-nav-item">
						<view class="label">
							申请时间
						</view>
						<view class="value">
							{{ info.created_at || '--'}}
						</view>
					</view>
				</view>
			</view>
			<view class="money" style="margin-bottom: 18rpx;">
				<view class="money-item">
					<view class="label">
						授信金额
					</view>
					<view class="value">
						{{ info.credit_money || '--'}}万元
					</view>
				</view>
				<view class="money-item">
					<view class="label">
						放款金额
					</view>
					<view class="value">
						{{ info.fk_money || '--' }}万元
					</view>
				</view>
			</view>
			<view class="steps">
				<view class="steps-title">
					审核进度
				</view>
				<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
			</view>
			<view class="money">
				<view class="money-item">
					<view class="label">
						申请编号
					</view>
					<view class="value">
						{{ info.order_id || '--'}}
					</view>
				</view>
				<view class="money-item">
					<view class="label">
						更新时间
					</view>
					<view class="value">
						{{ info.updated_at || '--'}}
					</view>
				</view>
			</view>
			<view class="money">
				<view class="money-item">
					<view class="label">
						备注
					</view>
					<view class="value">
						{{ info.desc || '--'}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	const id = ref(null)
	onLoad((options)=>{
		id.value = options.id
		getInfo()
	})
	const list2 = ref([{
		title: '已提交',
		desc: '平台收到申请',
		id:7
	}, {
		title: '申请中',
		desc: '',
		id:1
	},{
		title: '授信',
		desc: '',
		id:2
	}, {
		title: '放款',
		desc: '',
		id:4
	}])
	const active = ref(0)
	// 获取详情
	const info = ref({})
	const getInfo = ()=> {
		getHttpApi({
			route: 'Newfinance.loanFinanceDetail',
			type:"3",
			id:id.value
		}).then(res=>{
			info.value = res.data
			active.value = list2.value.findIndex(v=> v.id == res.data.status)
			list2.value[active.value].time = res.data.jinjian_time
		})
	}
</script>
<style>
	page{
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.steps{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 50rpx 40rpx;
		&-title{
			margin-bottom: 46rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 30rpx;
		}
	}
	image {
		width: 100%;
		height: 100%;
	}

	.label {
		font-weight: 400;
		font-size: 26rpx;
		color: #7A7A7A;
		line-height: 30rpx;
	}

	.value {
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		line-height: 30rpx;
	}

	.main {
		padding: 64rpx 26rpx 44rpx;
	}

	.money {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 32rpx 40rpx;
		margin-top: 20rpx;

		&-item {
			display: flex;
			justify-content: space-between;
		}
	}

	.info {
		background: #FFFFFF;
		border-radius: 10rpx;
		position: relative;
		padding: 74rpx 42rpx 32rpx;

		&-logo {
			width: 102rpx;
			height: 102rpx;
			border: 2rpx solid #F6F6F6;
			box-sizing: border-box;
			position: absolute;
			left: 0;
			right: 0;
			top: -51rpx;
			margin: auto;
			border-radius: 100%;
			overflow: hidden;
		}

		&-title {
			text-align: center;
		}

		&-nav {
			display: flex;
			flex-direction: column;
			padding-top: 72rpx;
			gap: 22rpx;

			&-item {
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>